<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小薇学院任务四</title>
	<style type="text/css">
		.parent{
			height:400px;
			}
		.child{
			width:400px;
			height:200px;
			background-color:#ccc;
			
			position:relative;
			top:50%;
			left:50%;
			
			margin:-100px 0 0 -200px;
			overflow:hidden;
		}
		.flex-container{
			display:flex;
			height:400px;
			flex-flow:row wrap;
		}
		.circle1,.circle2{
		    width:100px;
			height:100px;
			background-color:#fc0;
			border-radius:50px;
		}
		.circle1{
			position:absolute;
			top:-50px;
			left:-50px;
		}
		.circle2{
			position:absolute;
			top:150px;
			left:350px;
		}
	</style>
</head>
<body>
	<div class="parent">
	    <div class="child">
		    <div class="circle1">
			</div>
			<div class="circle2">
			</div>
		</div>
	</div>
	<div class="flex-container">
		<div class="child">
		    <div class="circle1">
			</div>
			<div class="circle2">
			</div>
		</div>
	</div>
</body>
</html>
